import React from 'react';
import { Space, Tag, Typography } from 'antd';
import { Question } from '@/types/question';
import MDEditor from '@uiw/react-md-editor';
import styles from './CodeReadingDisplay.module.css';

const { Text } = Typography;

interface CodeReadingDisplayProps {
  question: Question;
  isAdmin?: boolean;
}

const CodeReadingDisplay: React.FC<CodeReadingDisplayProps> = ({ question, isAdmin = false }) => {
  return (
    <div className={styles.container}>
      {/* 题目内容 */}
      <div className={styles.content}>
        <MDEditor.Markdown source={question.content} />
      </div>

      {/* 题目元信息 */}
      <div className={styles.meta}>
        <Space size="middle">
          <Tag color="blue">代码阅读题</Tag>
          <Tag color="gold">{"⭐".repeat(question.difficulty)}</Tag>
          {question.source && (
            <Tag color="purple">来源: {question.source}</Tag>
          )}
        </Space>
      </div>

      {/* 附属题列表 */}
      {question.sub_questions && question.sub_questions.length > 0 && (
        <div className={styles.subQuestions}>
          {question.sub_questions.map((subQuestion, index) => (
            <div key={subQuestion.id} className={styles.subQuestion}>
              <div className={styles.subQuestionTitle}>
                <Text strong>{index + 1}. </Text>
                <MDEditor.Markdown source={subQuestion.content} />
              </div>

              {subQuestion.type !== 'true_false' && subQuestion.choices && (
                <div className={styles.choices}>
                  {subQuestion.choices.map((choice) => (
                    <div 
                      key={choice.id} 
                      className={`${styles.choice} ${
                        Array.isArray(subQuestion.correct_answers) && 
                        subQuestion.correct_answers.includes(choice.id) 
                          ? styles.correctChoice 
                          : ''
                      }`}
                    >
                      <Text>{choice.content}</Text>
                    </div>
                  ))}
                </div>
              )}

              {subQuestion.type === 'true_false' && (
                <div className={styles.trueFalse}>
                  <Tag color={subQuestion.correct_answers ? 'success' : 'error'}>
                    {subQuestion.correct_answers ? '正确' : '错误'}
                  </Tag>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* 答案解析 */}
      {isAdmin && question.answer_explanation && (
        <div className={styles.explanation}>
          <div className={styles.explanationTitle}>答案解析</div>
          <MDEditor.Markdown source={question.answer_explanation} />
        </div>
      )}
    </div>
  );
};

export default CodeReadingDisplay; 